import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';
import { Card, Modal, Result } from 'antd';
import { TableOutlined, DeleteOutlined, ShareAltOutlined, ImportOutlined, ExportOutlined, InfoCircleOutlined, NodeIndexOutlined, ApartmentOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';

import { ToolsHeader } from '../../../components';
import { DataValuesObjectValuesPanel } from './data-values-panels';
import { DataSource } from '../../../services';

export interface DataValuesObjectPanelProps {
    style?: CSSProperties;
    dataSource: DataSource;
    objectIdentifier: string | null;
}

export const DataValuesObjectPanel: React.FC<DataValuesObjectPanelProps> = (props) => {

    const [action, setAction] = useState<string>('数据');

    return (
        <Container style={props.style}>
            <Header>
                <ToolsHeader
                    activeKey={action}
                    leftItems={[
                        {
                            key: '数据',
                            label: '数据',
                            icon: <PartitionOutlined />,
                        }
                    ]}
                    centerItems={[
                        {
                            key: 'SQL',
                            label: 'SQL',
                            icon: <InfoCircleOutlined />,
                            disabled: true,
                        },
                        {
                            key: '分析',
                            label: '分析',
                            icon: <DeleteOutlined />,
                            disabled: true,
                        }
                    ]}
                    rightItems={[
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                        } else {
                            setAction(key);
                        }
                    }}></ToolsHeader>
            </Header>
            <>
                <DataValuesObjectValuesPanel
                    style={action === '数据' ? props.style : { ...props.style, display: 'none' }}
                    dataSource={props.dataSource}
                    objectIdentifier={props.objectIdentifier}
                ></DataValuesObjectValuesPanel>
            </>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;
